<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>无标题文档</title>

	<script src="/js/vue.min.js"></script>
	<script src="/elementui/index.js"></script>
	<link href="/elementui/index.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="/js/axios.min.js"></script>
	<link href="/css/layui.css" rel="stylesheet" type="text/css">
	<link href="/css/base.css" rel="stylesheet" type="text/css">
	<script src="/ckeditor/ckeditor.js"></script>
</head>
<body style="margin: 13px;">
<div id="loginDiv">
	<template>
		<span>名称：</span>
		<input type="text" v-model.trim="mingcheng" size="17"/>
		<input type="button" value="查询" @click="dongwuRes()" class="lanse" style="width: 86px;"/>
	</template>
	<table class="layui-table">
		<thead>
		<tr>
			<th>序号</th>
			<th>类别</th>
			<th>动物名称</th>
			<!-- <th>内容</th> -->
			<th>图片</th>

			<th>备注</th>
			<th>发布时间</th>
			<th>状态</th>
			<th>审核状态</th>
			<th>操作</th>
		</tr>
		</thead>
		<tbody>
		<tr v-for="(dongwu, index) in xianshilist" :key="dongwu.id">
			<td>{{index + 1}}</td>
			<td>{{dongwu.leibie.mingcheng}}</td>
			<td>{{dongwu.mingcheng}}</td>
			<!-- <td>{{dongwu.jieshao}}</td> -->
			<td style="width: 13%;">
				<img :src="dongwu.fujian" />
			</td>


			<td>{{dongwu.beizhu}}</td>
			<td>{{dongwu.fabushi}}</td>
			<td>
				{{dongwu.zt}}&nbsp;&nbsp;&nbsp;
				<a :href="'/admin/lingyang/lingyangAdd.html?dongwu_id=' + dongwu.id" style="color: red;">领养</a>
			</td>
			<td :style="{ color: dongwu.shenhe === '1'? 'red' : dongwu.shenhe === '2'? 'green' : 'inherit' }">
				{{dongwu.shenhe === '1'? '未审核通过' : dongwu.shenhe === '2'? '审核通过' : dongwu.shenhe}}
			</td>
			<td>
				<input type="button" value="编辑" class="lvse" @click="edit(dongwu)" style="width: 66px;"/>
				<input type="button" value="删除" class="hongse" @click="del(dongwu.id)" style="width: 66px;"/>
			</td>
		</tr>
		</tbody>
	</table>


	<el-pagination background
				   layout="total, prev, pager, next"
				   :total="total"
				   :page-size="pageSize"
				   :current-page="currentPage"
				   @current-change="handleCurrentChange">
	</el-pagination>

<!-- 	<input type="button" value="添加流浪动物" class="lanse" onclick="dongwuAdd()" style="width: 119px;"/> -->

	<el-dialog title="编辑" :visible.sync="dialogFormVisible" width="80%">
		<table width="98%" align="center" border="0" cellpadding="4" cellspacing="1" bgcolor="#F5F5F5" style="margin-bottom:8px">
			<tr bgcolor="#FFFFFF" style="height: 38px;">
				<td width="123" bgcolor="#FFFFFF" align="right">
					类别：
				</td>
				<td bgcolor="#FFFFFF" align="left">
					<select class="select" v-model="dongwu.leibieId">
						<option value="0">--请选择类别--</option>
						<option v-for="(leibie, index) in leibieList" :key="leibie.id" :value="leibie.id">{{leibie.mingcheng}}</option>
					</select>
				</td>
			</tr>
			<tr bgcolor="#FFFFFF" style="height: 38px;">
				<td width="123" bgcolor="#FFFFFF" align="right">
					名称：
				</td>
				<td bgcolor="#FFFFFF" align="left">
					<input type="text" v-model.trim="dongwu.mingcheng" size="55"/>
				</td>
			</tr>
			<tr bgcolor="#FFFFFF" style="height: 38px;">
				<td width="123" bgcolor="#FFFFFF" align="right">
					简单介绍：
				</td>
				<td bgcolor="#FFFFFF" align="left">
					<textarea class="ckeditor" name="jieshao" v-model.trim="dongwu.jieshao" cols="60" rows="7"></textarea>
				</td>
			</tr>
			<tr bgcolor="#FFFFFF" style="height: 38px;">
				<td width="123" bgcolor="#FFFFFF" align="right">
					图片：
				</td>
				<td bgcolor="#FFFFFF" align="left">
					<input type="text" size="60" readonly="readonly" v-model="dongwu.fujian"/><br/>
					<input type="file" ref="fileRef" accept="*" @change="handleFileChange($event)"/>
					<input type="button" value="上传" style="width: 66px;" @click="upload()"/>
					<input type="hidden" size="60" readonly="readonly" v-model="dongwu.fujianYuan"/>
				</td>
			</tr>
			<tr bgcolor="#FFFFFF" style="height: 38px;">
				<td width="123" bgcolor="#FFFFFF" align="right">
					备注：
				</td>
				<td bgcolor="#FFFFFF" align="left">
					<input type="text" v-model="dongwu.beizhu" size="35" />
				</td>
			</tr>
			<tr bgcolor="#FFFFFF" style="height: 38px;">
				<td width="123" bgcolor="#FFFFFF" align="right">
					审核状态：
				</td>
				<td bgcolor="#FFFFFF" align="left">
					<input type="button" :class="{ 'active': dongwu.shenhe === '1' }" value="未审核通过" @click="setShenhe('1')" style="width: 86px; margin-right: 10px;"/>
					<input type="button" :class="{ 'active': dongwu.shenhe === '2' }" value="审核通过" @click="setShenhe('2')" style="width: 86px;"/>
				</td>
			</tr>
			<tr bgcolor="#FFFFFF" style="height: 38px;">
				<td width="123" bgcolor="#FFFFFF" align="right">
					&nbsp;
				</td>
				<td bgcolor="#FFFFFF" align="left">
					<input type="button" value="提交" @click="dongwuUpdate()" class="lanse" style="width: 86px;"/>&nbsp;
				</td>
			</tr>
		</table>
	</el-dialog>
</div>



<script type="text/javascript">
	function dongwuAdd()
	{
		var url="../dongwu/dongwuAdd.html";
		window.location.href=url;
	}

	var vm = new Vue({

		el: '#loginDiv',
		data:
				{
					total:0,
					pageSize:2,
					currentPage:1,//当前页

					dongwuList:[],
					xianshilist: null,

					dialogFormVisible:false,
					dongwu:{

					},
					file:"",
					mingcheng:"",
					leibieList:[],
				},
		methods:
				{
					getData()
					{
						axios({
							method: 'POST',
							url: '/dongwuMana',
							params:{

							}
						}).then(data => {
							if (data.data.state == 66)
							{
								this.dongwuList=data.data.data;
								this.total=this.dongwuList.length;

								this.xianshilist = this.dongwuList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
							}

						}).catch(error => {
							alert(error);
						})
					},

					handleCurrentChange(currentPage)//用户点的页码
					{
						var _this = this;
						if (_this.dongwuList)
						{
							if (currentPage)
							{
								_this.currentPage = currentPage;
							}
							_this.xianshilist = _this.dongwuList.slice((_this.currentPage - 1) * _this.pageSize,_this.currentPage * _this.pageSize);
						} else {}

					},


					edit(dongwu)
					{
						this.dongwu={...dongwu};
						this.dialogFormVisible=true;
					},

					setShenhe(status)
					{
						this.dongwu.shenhe = status;
					},

					dongwuUpdate()
					{
						if(this.dongwu.mingcheng=="")
						{
							alert("请输入器材名称");
							return false;
						}
						axios({
							method: 'POST',
							url: '/dongwuUpdate',
							data: this.dongwu,
							/* params:{
                                username:this.dongwu.userName,
                                password:this.dongwu.userPw,
                            } */
						}).then(data => {
							if (data.data.state == 66)
							{
								alert("修改成功");

								this.dialogFormVisible=false;
								this.getData();
							}

						}).catch(error => {
							alert(error);
						})
					},

					del(id)
					{
						if(confirm('您确定删除吗？'))
						{
							axios({
								method: 'POST',
								url: '/dongwuDel',
								//data: this.fang,
								params:{
									id:id,
								}
							}).then(data => {
								if (data.data.state == 66)
								{
									alert("删除成功");
									this.currentPage=1;
									this.getData();
								}

							}).catch(error => {
								alert(error);
							})
						}
					},

					down(url)
					{
						window.location.href="/down?url="+url;
					},

					handleFileChange(event)
					{
						this.file = event.target.files[0];
					},

					upload()
					{
						/* if(this.$refs.fileRef.value=="") */
						if(this.file=="")
						{
							alert("请选择文件");
							return false;
						}

						let formFile = new FormData();
						formFile.append("file", this.file);

						axios({
							method: 'POST',
							url: '/upload',
							data: formFile,
							/* params:{
                                username:this.dongwu.userName,
                                password:this.dongwu.userPw,
                            } */
						}).then(data => {
							if (data.data.state == 66)
							{
								alert("上传成功");
								this.file='';
								var fujian=data.data.data;
								this.dongwu.fujian=fujian.fujian;
								this.dongwu.fujianYuan=fujian.fujianYuan;
							}
						}).catch(error => {
							alert(error);
						})


					},


					dongwuRes()
					{
						axios({
							method: 'POST',
							url: '/dongwuRes',
							params:{
								mingcheng:this.mingcheng,
							}
						}).then(data => {
							if (data.data.state == 66)
							{
								this.dongwuList=data.data.data;
								this.total=this.dongwuList.length;

								this.xianshilist = this.dongwuList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
							}

						}).catch(error => {
							alert(error);
						})
						this.currentPage=1;
					},

					leibieAll()
					{
						axios({
							method: 'POST',
							url: '/leibieAll',
							/* data: this.laoshi, */
							/* params:{
                                username:this.laoshi.userName,
                                password:this.laoshi.userPw,
                            } */
						}).then(data => {
							if (data.data.state == 66)
							{
								this.leibieList=data.data.data;
								//alert(this.leibieList.length);
							}
						}).catch(error => {
							alert(error);
						})
					},


				},
		created()
		{
			this.getData();
			this.leibieAll();
		},


	})
</script>


<style>
	.el-pagination{
		text-align: right;
		padding-top: 20px;
	}
	.active {
		background-color: #ccc; /* 可以根据需求修改选中按钮的样式 */
	}
</style>

</body>
</html>